<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<!--引入layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

		<script src="/admin/js-css/js/eCharts/echarts.js"></script>

		<link rel="stylesheet" type="text/css" href="/admin/js-css/css/welcome.css" />
		<link rel="stylesheet" href="css/pageLR.css">
		<link rel="icon" href="img/logo.png">
		<title>欢迎</title>
		<style>
			/* 样式重置 */
			html,
			body {
			    margin: 0;
			    padding: 0;
			}
			/*滚动条整体样式*/
			::-webkit-scrollbar {
			    /*高宽分别对应横竖滚动条的尺寸*/
			    width: 6px;
			    height: 10px;
			    background-color: rgba(255, 255, 255, 0.1);
			}
			
			/*滚动条里面滑块*/
			::-webkit-scrollbar-thumb {
			    background: rgba(144, 147, 153, .3);
			    border-radius: 4px;
			    cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- 顶部数据 -->
			<div class="header_all" v-if="div1.length>0">
				<div class="header_list" v-for="(item,index) in div1">
					<div class="de_all">
						<img :src="item.img_url" >
						<div data-v-4dc2452e="">
							<span data-v-4dc2452e="" class="a4">{{item.name}}</span>
							<div data-v-4dc2452e="" class="he_num"><span data-v-4dc2452e="">
									{{item.value}}
								</span></div>
						</div>
					</div>
				</div>

			</div>
			<!-- 饼图表 -->
			<div class="btb" v-if="div2.length>0">
				<div class="card_box card_box1" v-for="(item,index) in div2">
					<div class="card_header">{{item.name}}</div>
					<div class="card_body">
						<div :id="item.id" style="width: 530px;height:265px;" >
						</div>
						<div :class="item.titleClass" v-if="item.n1!=undefined && item.n1 != ''">
							<div class="item">
								<img :src="item.img_url">
								<div>
									<div class="disco">{{item.n1}}</div>
									<div>{{item.v1}}</div>
								</div>
							</div>
							<div class="home_line"></div>
							<div class="item">
								<div>
									<div class="disco">{{item.n2}}</div>
									<div>{{item.v2}}</div>
								</div>
							</div>
						</div>

						<div :class="item.titleClass" v-else >
							<img :src="item.img_url" >
						</div>
					</div>
				</div>

			</div>
			<!-- 折现统计和应用 -->
			<div class="btb" v-if="div3.title!=undefined && div3.title!='' ">
				<div class="card_box card_box2">
					<div class="card_header">{{div3.title}}</div>
					<div class="card_body disbody">
						<div style="border-right: 1px solid #eaebf0;">
							<div id="main4" style="width: 710px;height:265px;"></div>
						</div>
						<div class="bodyright" style="width: 100%;">
							<div class="bodytop">
								<div class="count_header">{{div3.name}}</div>
								<div class="count_cont">
									<div class="itemcont" v-for="(item,index) in div3.listcount">
										<div class="wyf">{{item.name}}</div>
										<div class="wyfnum">{{item.value}}</div>
										<div class="lines"></div>
									</div>
								</div>
								<div class="count_conts">
									<div class="itemcont">
										<img :src="div3.itemcount_img">
									</div>
									<div class="itemcont">
										<div class="wyf">{{div3.count_name}}</div>
										<div class="wyfnum">{{div3.count}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="card_box card_box1">
					<div class="card_header">{{div3.appName}}</div>
					<div class="card_body">
						<div class="all_echart">
							<div class="ying_all">
								<div class="ying_list" v-for="(item,index) in div3.applist">
									<a :href="item.href"><img :src="item.img_url"
											class="ying_img">
										<div>{{item.name}}</div>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					div1:[],
					div2:[],
					div3:{}
				}
			},
			created(){
				this.getData();
			},
			methods:{
				async getData(){
					const res = await postBody("/admin/api/DataManagementController/welcomePageDataStatistics",{});
					if(res.code == 1){
						if(res.data.url!=undefined && res.data.url!=""){
							window.location.href = res.data.url;
						}else if(res.data.img!=undefined && res.data.img!=""){
							window.location.href = "/admin/html/welcome_not.html?src="+res.data.img
						}else {
							this.div1 = res.data.div1;
							this.div2 = res.data.div2;
							this.div3 = res.data.div3;
							this.$nextTick(function (){
								for(let a=0;a<this.div2.length;a++){
									this.div2LoadPrie(this.div2[a]);
								}
								this.div3LoadLine();
							})
						}
					}
				},
				//div2加载饼状图
				div2LoadPrie(item){
					var chartDom = document.getElementById(item.id);
					var myChart = echarts.init(chartDom);
					var option;
					option = {
						tooltip: {
							trigger: 'item'
						},
						legend: {
							top: '70%',
							left: '50%',
						},
						series: [{
							name: item.series.name,
							type: 'pie',
							radius: '50%',
							center: ['30%', '50%'],
							label: {
								show: false,
								position: 'center'
							},
							data: item.series.data,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					option && myChart.setOption(option);
				},

				//折线图统计
				div3LoadLine(){
					var chartDom4 = document.getElementById('main4');
					var myChart4 = echarts.init(chartDom4);
					var option4;
					option4 = {
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: this.div3.line.legend
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: this.div3.line.xAxis
						},
						yAxis: {
							type: 'value'
						},
						series: this.div3.line.series
					};
					option4 && myChart4.setOption(option4);
				}
			}
		})
	</script>


</html>
